<template>
	<view>
		<view class="YouRan-UI-XuanXiangKa-2 Flex Bj-BeiJingSe" style="margin-bottom: 0;">
			<view class="XunHuan Flex" @click="DianJi_QieHuan_Tab(1)">
				<text :class="QieHuanKa==1?'Zi H3 H3-Line':'Zi H3 H3-Line Zt-ZhanWeiSe'">关注的人</text>
			</view>
			<view class="XunHuan Flex" @click="DianJi_QieHuan_Tab(2)">
				<text :class="QieHuanKa==2?'Zi H3 H3-Line':'Zi H3 H3-Line Zt-ZhanWeiSe'">用户筛选</text>
			</view>
		</view>
		<template v-if="QieHuanKa==1">
			<view class="YouRan-UI-LieBiao-10">
				<template v-if="YouRan_UI_LieBiao_10_JiaZai_ZhuangTai=='YouShuJu'">
					<view
						@click="DianJi_AiTe(item.username)"
						v-for="item in YouRan_UI_LieBiao_10"
						class="XunHuan Flex">
						<view class="Zuo">
							<image :src="item.avatar" mode="widthFix"></image>
						</view>
						<view class="Zhong">
							<view class="NiCheng H2">
								{{item.nickname}}
								<text class="P">{{item.roleName}}</text>
							</view>
							<view class="P">
								
								<text>{{item.stats.postPublishCount}}帖子</text>
								<text>{{item.stats.followMeCount}}关注</text>
								<text>{{item.stats.likeMeCount}}点赞</text>
							</view>
						</view>
						<view class="You Flex">
							<view
								class="Bj-LanSe"
								style="color: #FFF;">@ Ta</view>
						</view>
					</view>
					<view
						v-if="YouRan_UI_LieBiao_10_JiaZai_ZhuangTai_JiaZaiGengDuo"
						@click="YouRan_UI_LieBiao_10_FangFa('FanYe')"
						class="H3 H3-Line Bj-BeiJingSe Zt-ZhanWeiSe Flex"
						style="padding: 35rpx 0;text-align: center;margin: 25rpx;justify-content: center;border-radius: 100rpx;">点击加载更多</view>
				</template>
				<template v-if="YouRan_UI_LieBiao_10_JiaZai_ZhuangTai=='JiaZaiZhong'">
					<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
				</template>
				<template v-if="YouRan_UI_LieBiao_10_JiaZai_ZhuangTai=='WuShuJu'">
					<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
						<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
						<view class="Zt-ZhanWeiSe">暂无任何数据</view>
					</view>
				</template>
			</view>
		</template>
		<template v-if="QieHuanKa==2">
			<view style="background: #F5F7FA;border-bottom: 1rpx solid #EBEEF5;padding-bottom: 25rpx;margin-top: 25rpx;">
				<view style="font-weight: bold;padding: 25rpx 0 0 25rpx;line-height: 28rpx;text-align: center;">用户筛选</view>
				<radio-group @change="DanXuan_YongHu_LeiXing" class="_DanXuan">
					<label>
						<radio :checked="DanXuan_LeiXing=='post'?true:false" value="post" />
						<view>发帖排行</view>
					</label>
					<label>
						<radio :checked="DanXuan_LeiXing=='like'?true:false" value="like" />
						<view>点赞排行</view>
					</label>
					<label>
						<radio :checked="DanXuan_LeiXing=='dislike'?true:false" value="dislike" />
						<view>点踩排行</view>
					</label>
					<label>
						<radio :checked="DanXuan_LeiXing=='follow'?true:false" value="follow" />
						<view>收藏排行</view>
					</label>
					<label>
						<radio :checked="DanXuan_LeiXing=='createDate'?true:false" value="createDate" />
						<view>最新加入</view>
					</label>
				</radio-group>
			</view>
			<template v-if="YongHu_LieBiao_ZuiXin.length">
				<view class="_YongHu">
					<view
						@click="DianJi_AiTe(item.username)"
						v-for="item in YongHu_LieBiao_ZuiXin"
						class="XunHuan">
						<view class="Tou"><image :src="item.avatar" mode="widthFix"></image></view>
						<view class="Ni">
							<text>{{item.nickname}}</text>
							<text>{{item.roleName}}</text>
						</view>
						<view class="AiTe">@Ta</view>
					</view>
				</view>
			</template>
			<template v-else>
				<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
			</template>
		</template>
	</view>
</template>

<script>
	export default {
		name:"YouRan-UI-GuanZhu-LieBiao",
		props:{
			
		},
		data() {
			return {
				QieHuanKa:1,
				YouRan_UI_LieBiao_10:[],
				YouRan_UI_LieBiao_10_MoRen_YeMa:2,
				YouRan_UI_LieBiao_10_JiaZai_ZhuangTai:"JiaZaiZhong",
				YouRan_UI_LieBiao_10_JiaZai_ZhuangTai_JiaZaiGengDuo:false,
				
				YongHu_LieBiao_ZuiXin:[],
				DanXuan_LeiXing:"post",
				YeMa:2,
			};
		},
		onLoad(e) {
			this.ShiFou_ZuJian_GuoLai_De = e.LeiXing;
			this.YouRan_UI_LieBiao_10_FangFa();
		},
		methods:{
			// 列表.10 - 列表.10 - 用户列表
			YouRan_UI_LieBiao_10_FangFa(e){
				let FanYe = e;
				if(FanYe){uni.showLoading({ title: "加载中" });}
				this.$_QingQiu(
					"GET","/api/v2/user/"+uni.getStorageSync('YongHuXinXi').data.detail.uid+"/mark/follow/users",
					{
						"whitelistKeys":"",
						"pageSize":15,
						"page":FanYe ? this.YouRan_UI_LieBiao_10_MoRen_YeMa : ""
					},
					(res) => {
						if(FanYe){
							if(res.data.data.list.length){
								this.YouRan_UI_LieBiao_10 = this.YouRan_UI_LieBiao_10.concat(res.data.data.list);
								this.YouRan_UI_LieBiao_10_MoRen_YeMa++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.paginate.total > res.data.data.paginate.pageSize){
								this.YouRan_UI_LieBiao_10_JiaZai_ZhuangTai_JiaZaiGengDuo = true
							}
							this.YouRan_UI_LieBiao_10 = res.data.data.list;
							if(this.YouRan_UI_LieBiao_10.length){
								this.YouRan_UI_LieBiao_10_JiaZai_ZhuangTai = "YouShuJu"
							}else{
								this.YouRan_UI_LieBiao_10_JiaZai_ZhuangTai = "WuShuJu"
							}
						}
					}
				)
			},
			DianJi_QieHuan_Tab(e){
				this.QieHuanKa = e;
				if(e == 2){
					this.QingQiu_YongHu()
				}
			},
			QingQiu_YongHu(){
				uni.request({
					url:this.$_URL() + "/api/v2/user/list",
					method:'GET',
					header:this.$_Fresns_Header(),
					data:{
						"pageSize":30,
						"orderType":this.DanXuan_LeiXing
					},
					success: (res) => {
						this.YongHu_LieBiao_ZuiXin = res.data.data.list
					}
				})
			},
			DianJi_AiTe(e){
				uni.setStorage({
					key: 'XuanZhong_AiTe',
					data: e,
					success: (res) => {
						if(this.ShiFou_ZuJian_GuoLai_De){
							uni.$emit('AiTe_LieBiao_HuiTiao')
						}
						uni.navigateBack();
					}
				});
			},
			DanXuan_YongHu_LeiXing(e){
				this.DanXuan_LeiXing = e.target.value;
				this.YongHu_LieBiao_ZuiXin = [];
				this.QingQiu_YongHu()
			},
		},
		// 触底事件
		onReachBottom(){
			if(this.QieHuanKa == 2){
				uni.showLoading({ title: "加载中" });
				uni.request({
					url:this.$_URL() + "/api/v2/user/list",
					method:'GET',
					header:this.$_Fresns_Header(),
					data:{
						"pageSize":30,
						"orderType":this.DanXuan_LeiXing,
						"page":this.YeMa
					},
					success: (res) => {
						if(res.data.data.list.length){
							this.YongHu_LieBiao_ZuiXin = this.YongHu_LieBiao_ZuiXin.concat(res.data.data.list)
							this.YeMa++
							uni.hideLoading();
						}else{
							uni.hideLoading();
							uni.showToast({
								title: "没有数据啦",
								icon: "none",
								duration: 1000
							});
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss">
._YongHu{
	padding: 0 25rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	.XunHuan{
		width: 337.5rpx;
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid $BianKuangSe;
		.Tou{
			width: 35rpx;
			height: 35rpx;
			overflow: hidden;
			border-radius: 100%;
			background: $BeiJingSe;
			image{
				display: block;
				width: 100%;
				height: auto;
			}
		}
		.Ni{
			display: flex;
			align-items: center;
			text:nth-child(1){
				line-height: 28rpx;
				font-size: 28rpx;
				padding: 0 15rpx;
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			text:nth-child(2){
				flex-shrink: 0;
				line-height: 18rpx;
				font-size: 18rpx;
				color: $ZhanWeiSe;
			}
		}
		.AiTe{
			font-size: 22rpx;
			margin-left: auto;
		}
	}
}
._DanXuan{
	margin: 0 25rpx;
	display: flex;
	flex-wrap: wrap;
	label{
		width: 25%;
		display: flex;
		align-items: center;
		margin-top: 15rpx;
		radio{
			margin: 0 -10rpx 0 -10rpx;
			padding: 0;
			transform: scale(0.5);
		}
	}
}
</style>